<script lang="ts" setup>
import Header from "@/layouts/user/Header.vue"
import Aside from "@/layouts/user/Aside.vue"
import Main from "@/layouts/user/Main.vue"
import Footer from "@/layouts/user/Footer.vue"
import { useResponsiveLayoutStore } from "@/store/responsiveLayout"

const store = useResponsiveLayoutStore()
</script>

<template>
  <t-space class="t-space" direction="vertical">
    <t-layout>
      <t-aside v-if="store.showType==='aside'" :width="store.asideWidth" class="aside_container">
        <Aside :isCollapsed="store.isCollapsed"/>
      </t-aside>
      <t-layout style="overflow: hidden">
        <t-header>
          <Header :collapsed="store.isCollapsed"/>
        </t-header>
        <t-content class="content">
          <t-drawer
            v-if="store.showType==='drawer'"
            v-model:visible="store.open"
            :footer="false"
            header
            placement="left"
            showInAttachedElement
            showOverlay
            size="200">
            <Aside/>
          </t-drawer>
          <Main/>
        </t-content>
        <t-footer class="footer">
          <Footer/>
        </t-footer>
      </t-layout>
    </t-layout>
  </t-space>
</template>

<style lang="less" scoped>
@header-height: var(--td-comp-size-xxl);
@content-height: calc(100vh - @header-height * 2);
@footer-height: @header-height;
@main-padding: 10px;
.t-space {
  width: 100vw;
  height: 100vh;

  .aside_container {
    background: var(--td-gray-color-13);
    flex-grow: 0;
    flex-shrink: 0;
    height: 100vh;
  }

  .content {
    height: @content-height;
    padding: @main-padding;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .footer {
    height: @footer-height;
    padding: 0;
    background-color: var(--td-bg-color-container);
  }
}
</style>


